const backgroundColor = 'transparent';
const color = ['#32C880', '#359DFD', '#75F', '#FFA800', '#FF6464'];
const title = {
  show: false,
  text: 'title',
  textStyle: {
    fontSize: 28,
    color: '#ffffff',
    fontFamily: 'PingFangSC-Medium, PingFang SC',
    fontWeight: 500,
    textShadowColor: '#4bb2ff',
    textShadowBlur: 12,
    textShadowOffsetX: 0,
    textShadowOffsetY: 0,
  },
  padding: 0,
  top: 20,
  left: 25,
};
const legend = {
  orient: 'vertical',
  right: 10,
  top: 'center',
  icon: 'circle', //图例形状
  padding: 0,
  top: 30,
  right: 40,
  itemWidth: 10, //小圆点宽度
  itemHeight: 14, //item间距
  itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
  textStyle: {
    fontSize: 14,
    // color: '#ffffff',
  },
};
const tooltip = {
  trigger: 'item',
  axisPointer: {
    type: 'shadow',
  },

};
const genPieOption = (data) => {
  // 饼图配置
  const option = {
    backgroundColor,
    color,
    title,
    tooltip,
    legend,
    series: [
      {
        name: '参与作业',
        type: 'pie',
        center: ['40%', '50%'],
        radius: ['40%', '70%'], //同心圆
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 2
        },
        data: data,
        animation: true, // 关闭默认动画
        emphasis: {
          scale: true, // 高亮时放大
          itemStyle: {
            shadowBlur: 10, // 添加阴影效果
            shadowColor:'rgba(0, 0, 0, 0.5)',
            shadowOffsetX: 10,
            shadowOffsetY: 10,
          }
        }
      }
    ]
  };

  return option


}

class EchartPieAnimation {
  constructor(myChart) {
    this.myChart = myChart;
    this.timer = null
    this.currentIndex = 0

  }

  highlight(next) {
    if (typeof next !== 'function') throw new Error('必须传入next函数')
    const itemLength = this.myChart.getOption().series[0].data.length
    this.timer = setInterval(() => {
      // console.log('this.currentIndex', this.currentIndex)
      if (this.currentIndex === itemLength) {
        //轮播完一轮
        this.abortHighlight()
        next()// 通知调用函数准备下一次轮播

      } else {
        //当前正常轮播
        this.clearHighlight()
        // 高亮当前图形
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        // 显示提示框
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        this.currentIndex = this.currentIndex + 1


      }
    }, 8000)

    window.onbeforeunload = () => {
      clearInterval(this.timer);
      this.timer = null
      this.myChart = null
    }
  }
  clearHighlight() {
    // 取消所有高亮
    this.myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    //取消tooltip高亮
    this.myChart.dispatchAction({
      type: 'hideTip',
    });

  }
  abortHighlight() {
    this.clearHighlight()
    clearInterval(this.timer)
    this.timer = null //重置
    this.currentIndex = 0 //重置
  }
}
